import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

ഈ ഉദാഹരണത്തിൽ:

• MyComponent ലേസിയായി ലോഡ് ചെയ്യാൻ React.lazy ഉപയോഗിക്കുന്നു.
• Suspense, LazyComponent-നെ പൊതിയുന്നു.
• fallback പ്രോപ്പ്, MyComponent ലോഡ് ചെയ്യുമ്പോൾ പ്രദർശിപ്പിക്കുന്ന ഒരു ഫാൾബാക്ക് UI (ഒരു ലോഡിംഗ് ഇൻഡിക്കേറ്റർ) നൽകുന്നു.

Implementing Error Boundaries

Suspense ലോഡിംഗ് സ്റ്റേറ്റുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ, Error Boundaries എന്നത് React കോമ്പോണന്റുകളാണ്. അവയുടെ ചൈൽഡ് കോമ്പോണന്റ് ട്രീയിൽ എവിടെയെങ്കിലും JavaScript പിശകുകൾ സംഭവിച്ചാൽ അവ പിടിച്ചെടുക്കുകയും, ആ പിശകുകൾ രേഖപ്പെടുത്തുകയും, മുഴുവൻ കോമ്പോണന്റ് ട്രീയും തകരാറിലാകുന്നതിനുപകരം ഒരു ഫാൾബാക്ക് UI പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു.

How Error Boundaries Work

Error Boundaries എന്നത് താഴെ പറയുന്ന ലൈഫ്സൈക്കിൾ രീതികൾ നിർവചിക്കുന്ന ക്ലാസ് കോമ്പോണന്റുകളാണ്:

• static getDerivedStateFromError(error): ഒരു പിന്തുടർച്ചയിലുള്ള കോമ്പോണന്റ് ഒരു പിശക് എറിഞ്ഞതിന് ശേഷം ഈ രീതി ഉപയോഗിക്കുന്നു. എറിയപ്പെട്ട പിശക് ഒരു ആർഗ്യുമെന്റായി ഇതിന് ലഭിക്കുകയും, സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുന്നതിന് ഒരു മൂല്യം നൽകുകയും വേണം.
• componentDidCatch(error, info): ഒരു പിന്തുടർച്ചയിലുള്ള കോമ്പോണന്റ് ഒരു പിശക് എറിഞ്ഞതിന് ശേഷം ഈ രീതി ഉപയോഗിക്കുന്നു. പിശക് സംഭവിച്ച കോമ്പോണന്റിനെക്കുറിച്ചുള്ള വിവരങ്ങൾ അടങ്ങിയ ഒരു ഇൻഫോ ഒബ്ജക്റ്റും പിശകും ഇതിന് ലഭിക്കുന്നു. Sentry അല്ലെങ്കിൽ Bugsnag പോലുള്ള ഒരു സേവനത്തിലേക്ക് പിശക് രേഖപ്പെടുത്താൻ പറ്റിയ ഒരിടമാണിത്.

പ്രധാനം: Error Boundaries അവയ്ക്ക് താഴെയുള്ള കോമ്പോണന്റുകളിലെ പിശകുകൾ മാത്രമേ പിടികൂടൂ. ഒരു Error Boundary-ക്ക് അതിനുള്ളിലെ പിശക് പിടികൂടാൻ കഴിയില്ല.

Example: Basic Error Boundary Implementation

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Error Boundary ഉപയോഗിക്കാൻ, പിശക് സംഭവിക്കാൻ സാധ്യതയുള്ള ഏതൊരു കോമ്പോണന്റിനെയും പൊതിയുക:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Integrating Suspense and Error Boundaries

Suspense-ഉം Error Boundaries-ഉം സംയോജിപ്പിക്കുമ്പോളാണ് ഇതിന്റെ യഥാർത്ഥ ശക്തി പുറത്തുവരുന്നത്. ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷനിൽ ലോഡിംഗ് സ്റ്റേറ്റുകളും പിശകുകളും മനോഹരമായി കൈകാര്യം ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. Suspense-നെ ഒരു Error Boundary ഉപയോഗിച്ച് പൊതിയുന്നതാണ് നല്ല രീതി. ഇങ്ങനെ ചെയ്യുമ്പോൾ, ലേസിയായി ലോഡ് ചെയ്യുന്ന കോമ്പോണന്റ് ലോഡ് ചെയ്യാൻ സാധിച്ചില്ലെങ്കിൽ (ഉദാഹരണത്തിന്, നെറ്റ്‌വർക്ക് പിശക്), Error Boundary-ക്ക് പിശക് പിടിച്ചെടുത്ത് ഉപയോക്താവിന് സഹായകരമായ ഒരു സന്ദേശം പ്രദർശിപ്പിക്കാൻ കഴിയും.

Example: Combining Suspense and Error Boundaries

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...